
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="../css/layui.css">
        <script src="../layui.js"></script>
    </head>
    <body>

        <div class="layui-card">
            <div class="layui-card-header">用户管理</div>
            <div class="layui-card-body">

                <!--表单-->
                <form class="layui-form" action="#">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="uname"
                                    autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline" >
                                 <input type="radio" name="sex" value="" title="全部" checked="">
      							<input type="radio" name="sex" value="女" title="女">
      							 <input type="radio" name="sex" value="男" title="男" >
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">职位</label>
                            <div class="layui-input-inline">
                                <select name="role" lay-verify="" lay-search>
                                    <option value="">--请选择或搜索--</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button lay-submit lay-filter="search" class="layui-btn layui-btn-radius
                                layui-btn-normal"><i class="layui-icon
                                    layui-icon-search"></i>搜索</button>
                        </div>
                    </div>
                </form>
                <!-- 结束表单 -->
                <!-- 数据展示 -->
                <table id="userTab" lay-filter="tab"></table>
            </div>
				
				<!-- 头像模板 -->
				<script type="text/html" id="icon">
  					<img src="{{d.head_icon}}" style="height:100%">
				</script>
				
				
            <!--   操作按钮 -->
            <script type="text/html" id="bar_menu">
                <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <!-- 表格的数据信息 -->
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                  <button class="layui-btn layui-btn-sm" lay-event="add">添加数据</button>
                </div>
              </script>

            <script>
            
               var mydata = [{"id":1,icon:'',"name":"无语","userName":"admin","password":"123456","gender":"男","rid":0}]
			
                layui.use(['form','table'], function(){
                    var form = layui.form
                    ,layer = layui.layer;
                    var table = layui.table;
                    var $ = layui.jquery;
                    
                    
                    $.post("../RoleServlet?method=all",function(data){
                    	var select_html = '';
                    	for(let role of data){
                    		
                    		select_html+=`<option value="${role.id}">${role.rname}</option>`;
                    	}
                    	$("[name=role]").append(select_html);
                    	form.render('select'); //刷新select选择框渲染
                    },"json");
                    
                    
                    form.on("submit(search)",function(data){
                    	console.log(data);
                    	table.reload('userTab', {
                    		  url: '../UsersServlet'
                    		  ,where: {
                    			  method: "findAll",
                    			  sex: data.field.sex,
                    			  uname:data.field.uname,
                    			  rid : data.field.role
                    		  }
                    		});
                    	return false;
                    });
                    
                    //第一个实例
                    table.render({
                        elem: '#userTab'
                        ,height: 400
                        ,url: "../UsersServlet" //数据接口
                        ,where:{
                        	method: "findAll"
                        }
                        ,page: true //开启分页
                        ,toolbar:'#toolbarDemo'
                        ,cols: [[ //表头
                        {field: 'id', title: '编号', sort: true}
                        ,{field: 'head_icon', title: '头像',templet:"#icon"} 
                        ,{field: 'name', title: '姓名'} 
                        ,{field: 'userName', title: '用户名'}
                        ,{field: 'gender', title: '性别'}
                        ,{field: 'role', title: '职位',templet:function(d){
                        	//d => 当前行所有的数据
                        	if(d.role){
                        		return d.role.rname;
                        	}else{
                        		return "无职位"
                        	}
                        }}
                        ,{title: '操作',toolbar:'#bar_menu',width:180,fixed:'right'}
                        ]]
                    });


                    //绑定table事件
                    table.on('tool(tab)',function(obj){
                        switch(obj.event){
                            case "detail":
                                alert("查看")
                            break;
                            case "edit":
                            	layer.open({
                                    type: 2,
                                    shade: false,
                                    area: ['500px','400px'],
                                    maxmin: true,
                                    content: 'updateUsers.html',
                                    shade :0.3,
                                    zIndex: layer.zIndex, //重点1
                                    success: function(layero){
                                        layer.setTop(layero); //重点2
										var updateWindow = window.frames[0];
                         	   			updateWindow.init_form(obj)
                         	   			
                                    }
                         	   		,btn:["修改","取消"]
                         	   		,btn1:function(){
	                         	   		var updateWindow = window.frames[0];
	                         	   		$(updateWindow.document).find("[lay-submit]").click();
		                         	   	table.reload('userTab', {
		                          		  url: '../UsersServlet'
		                          		  ,where: {
		                          			  method: "findAll"
		                          			
		                          		  }
		                          		});
                         	   		},
                         	   		
                               });

                            	
                            	
                            break;
                            case "del":
                            	var index = layer.load();
                            	$.post("../UsersServlet",{method:'del',id:obj.data.id},function(data){
                            		if(data == "ok"){
                            			obj.del();
                            			layer.msg("删除成功!");
                            		}else{
                            			layer.msg("删除失败!!");
                            		}
                            		layer.close(index)
                            	});
                            	
                            break;
                        }
                    });
                    
                    table.on("toolbar(tab)",function(obj){
                       if(obj.event=="add"){
                    	   
                    	   layer.open({
                               type: 2,
                               shade: false,
                               area: ['500px','400px'],
                               maxmin: true,
                               content: 'addUser2.html',
                               shade :0.3,
                               zIndex: layer.zIndex, //重点1
                               success: function(layero){
                                   layer.setTop(layero); //重点2
                               }
                    	   		,btn:["添加","取消"]
                    	   		,btn1:function(){
                    	   			/*
                    	   			var frame= $("body").find("iframe");
                    	   			frame.find("[lay-submit]").click()
                    	   			alert(frame.find("[lay-submit]"));
                    	   			*/
                    	   			
                    	   			var adduser2Window = window.frames[0];
                    	   			var adduserDocuemtn = adduser2Window.document;
                    	   			$(adduserDocuemtn).find("[lay-submit]").click()
                    	   			
                    	   			
                    	   			
                    	   			
                    	   			//alert($(window.frames[0]).find("[lay-submit]").val());
                    	   		}
                          });

                       }
                        
                    })

              
                 })
                 
                 
                 
                 
                 
            </script>
        </body>
    </html>